<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-row :gutter="0" style="display: flex">
      <el-col :span="3" >
        <div class="imgBox">
          <el-image class="icoHeadUserImage" fit="contain" :src="formOpsUser.icoUrl || require('@/assets/images/ico/avatar12.png')" />
        </div>
      </el-col>
      <el-col :span="21">
        <!--column 一行的数量-->
        <el-descriptions :column="2" border :size="size" :contentStyle="CS" :label-style="LS">
          <el-descriptions-item label="名称(昵称)">{{formOpsUser.name}}</el-descriptions-item>
          <el-descriptions-item label="登录用户名">{{formOpsUser.loginName}}</el-descriptions-item>
          <el-descriptions-item label="身份证">{{formOpsUser.idCard}}</el-descriptions-item>
          <el-descriptions-item label="在线情况">
            <el-tag size="mini" type="success" v-if="formOpsUser.onLine === true" >在线</el-tag>
            <el-tag size="mini" v-else type="info">离线</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="角色">
            <span v-for="(item, index) in formOpsUser.roleList" :key="index">
                  <el-tag size="small">{{formOpsUser.roleList[index].name}}</el-tag>&nbsp;
                </span>
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <el-tag size="mini" type="success" v-if="formOpsUser.sex === 1" >男性</el-tag>
            <el-tag size="mini" v-else-if="formOpsUser.sex === 0" type="warning">女性</el-tag>
            <el-tag size="mini" v-else-if="formOpsUser.sex === 9" type="info">未知</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag size="mini" type="success" v-if="formOpsUser.status === 1" >正常</el-tag>
            <el-tag size="mini" v-else-if="formOpsUser.status === 2" type="warning">停用</el-tag>
            <el-tag size="mini" v-else-if="formOpsUser.status === 3" type="info">离职</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-descriptions style="margin-top:10px" :column="2" border :size="size" :contentStyle="CS" :label-style="LS">
      <el-descriptions-item label="说明">{{formOpsUser.description}}</el-descriptions-item>
    </el-descriptions>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

import {getFullDate, getFullTime} from "@/utils/utils";

export default {
  name: "UserDetailed",
  data(){
    return {
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '详情',
      },
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        showClose: true,
      },
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 展示的数据
      formOpsUser: {
        depId: null,
        roleIdList: null,
        name: null,
        loginName: null,
        password: null,
        // 明文密码
        passwordPlaintext: null,
        sex: null,
        ico: null,
        status: null,
        description: null,
        idCard: null,
      },
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },

    }
  },
  methods: {
    /**
     * 打开弹出框
     * @param obj 人员信息
     */
    openDetailed(obj){
      this.formOpsUser = obj
      this.tableConfig.show = true
    },
    /**
     * 转换时间戳为时间格式
     */
    getTime(item){
      return getFullTime(item)
    },
    /**
     * 时间转日期
     * @param item 要转换的时间戳
     * @return {string}
     */
    getFullDate(item){
      return getFullDate(item)
    },
  },
}
</script>

<style scoped>

.imgBox {
  border: 1px solid #ebeef5;
  /*左边框样式，这里设置为无*/
  border-right: none;
  width: 100%;
  height: 100%;
  /*相对定位*/
  position: relative;
}


/*头像的样式*/
.imgBox .icoHeadUserImage{
  width: 120px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  max-height: 100%;
  margin-left: -65px;
  padding: 5px;
}

</style>

